<template>
  <div class="app-main">
    <div class="text-center">
      <el-image :src="mainPic"/>
    </div>
    <div class="download">
      <div class="item" v-for="(item, index) in downloads" :key="'d' + index">
        <el-image :src="item.icon"/>
        <p>{{ item.label }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue';

export default defineComponent({
  name: 'AppView',
  setup() {
    const visible = ref(false);
    const state = reactive({
      mainPic: 'https://jc-personal.obs.cn-southwest-2.myhuaweicloud.com/public/image/chat/jim_2025-09-17_22-26-00.jpg',
      downloads: [
        {icon: 'https://jc-personal.obs.cn-southwest-2.myhuaweicloud.com/public/image/icon/android_dark.svg', label: 'Android', active: false},
        {icon: 'https://jc-personal.obs.cn-southwest-2.myhuaweicloud.com/public/image/icon/windows_dark.svg', label: 'Windows', active: false}
      ]
    });
    return {
      visible,
      ...toRefs(state)
    }
  }
})
</script>
<style scoped lang="scss">
.download {
  padding: 50px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 20px;
    padding: 20px;
    cursor: pointer;
    border-radius: 6px;

    .el-image {
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
    }

    &:hover {
      background-color: rgba(147, 200, 256, 0.3);
      color: rgb(52, 104, 156);
    }
  }
}
</style>
